<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生jsonp</title>
</head>
<!-- jsonp：只支持get请求
具备跨域能力的标签：img，link，iframe，script -->

<body>
    <div id='result'></div>
    <input type="text" placeholder="请输入用户名">
    <span></span>
    <script>
        var input = document.querySelector('input');
        var span = document.querySelector('span');

        function handle(data) {
            // 第一部分    
            // let result = document.querySelector('#result');
            // result.innerHTML = data.name;
            // 第二部分
            input.style.border = '1px solid red';
            span.innerHTML = data.msg;
        }
        input.onblur = function() {
            let uname = this.value;
            const script = document.createElement('script');
            script.src = 'http://127.0.0.1:8000/jsonp';
            document.body.appendChild(script);
            // 为script添加onload事件
            script.onload = function() {
                // 当script请求之后，将body中的script标签删除
                document.body.removeChild(script);
            }
        }
    </script>
    <!-- 第一部分 -->
    <!-- <script src='http://127.0.0.1:8000/jsonp'></script> -->
</body>

</html>